<template>
  <el-upload class="avatar-uploader" action="#" :limit="1" :show-file-list="false" :http-request="handleUpload"
    :before-upload="handleChange" ref="uploadBanner">
    <img v-if="formData.appLogo" :src="formData.appLogo" class="avatar" />
    <!-- accept=".png,.jpe,.jpeg" -->
    <el-icon v-else class="avatar-uploader-icon">
      <Plus />
    </el-icon>
    <el-icon v-if="formData.appLogo" class="logoDelete" @click.stop="clearUploadImg">
      <CircleCloseFilled />
    </el-icon>
  </el-upload>
</template>
<!-- <script lang="ts" setup> -->
<script setup>
import { reactive } from 'vue';
const emit = defineEmits(['before-upload'])
const formData = reactive({ appLogo: "" });
const handleChange = (rawFile) => {
  // if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
  //   ElMessage.error("只能上传jpeg/jpg/png图片");
  //   return false;
  // } else if (rawFile.size / 1024 / 1024 > 1) {
  //   ElMessage.error("上传图片最大不超过1MB!");
  //   return false;
  // }
  return true;
};
const handleUpload = async (file) => {
  console.log(file.file, 'file.file');
  // this.$emit("before-upload", file)
  emit('before-upload', file)
  let fd = new FormData();
  fd.append("file", file.file);
  // 这里是请求上传接口
  // let result = await uploadFile(fd);
  // if (result.code == 200) {
  // 后台只返回文件名称，需要拼接
  //   formData.value.appLogo =
  //     import.meta.env.VITE_APP_HOSTURL +
  //     import.meta.env.VITE_APP_BASEURL +
  //     "file/previewFile/" +
  //     result.data;
  //   // 去掉form表单验证的*
  //   // formRef.value.clearValidate(['appLogo'])
  //   // 上传成功清空文件
  //   uploadBanner.value.handleRemove(file);
  // } else {
  //   formData.value.appLogo = "";
  //   ElMessage.error(result.message);
  //   uploadBanner.value.handleRemove(file);
  // }

};
const clearUploadImg = (file) => {
  formData.value.appLogo = "";
  uploadBanner.value.clearFiles();
};
</script>